<template>
	<view>
		<!-- <u-navbar title="视频" :placeholder="true" leftIcon=" " :bgColor="bgColor" :titleStyle="titleStyle"></u-navbar> -->
		<headerinfo></headerinfo>
		<!-- <headertop @search="search"></headertop> -->
		<!-- <view class="fixedTop">
			<view class="search">
				<u-search height="37" bgColor="#fff" shape="round" :showAction="false" disabled
					@click="toSearch" :value="query.searchContent"></u-search>
					<span @click="resetData">重置</span>
			</view>
		</view> -->
		<view class="" style="width: 95%;margin: 0 auto;">
			<view class="shaixuan">
				<view class="shaixuanqi">
					<i class="iconfont">&#xe60f;</i>
					<span>筛选器</span>
				</view>
				
				 
			<!-- 	 <view class="checkVideo" @click="clearType">
				 	<i class="iconfont" v-if="query.type == 'video'" style="color: #f97f7f;">&#xe626;</i>
				 	<i class="iconfont" v-else>&#xe6a4;</i>
					<span :class="query.type == 'video'?'active':''">视频</span>
				 </view> -->
				<el-dropdown class="li" @command="changfenlei">
					<span class="el-dropdown-link">
						分类<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="item.id" v-for="(item,index) in tabBars"
							:key="index">{{item.name}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-date-picker @change="changeFanwei" size="mini" style="margin: 0 20px;" v-model="datefanwei"
					type="daterange" value-format="yyyyMMdd" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>

				<el-dropdown class="li" @command="changejiating">
					<span class="el-dropdown-link">
						家庭<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="item.docId" v-for="(item,index) in familylist"
							:key="index">{{item.familyName}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

			</view>
			<card ref="card" :list="listData"></card>
		</view>
		<!-- <liu-waterfall :dataList="listData" :column="columns" @click="toInfo"></liu-waterfall> -->
		<nodata v-if="listData.length == 0"></nodata>
		<drag-button :isDock="true" :existTabBar="true" />
	</view>
</template>

<script>
	import card from '@/components/card/card.vue';
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		components: {
			dragButton,
			card
		},
		data() {
			return {
				datefanwei: '',
				columns: 2,
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				query: {
					categoryIds: [],
					pageSize: 10,
					lastDocId: '',
					type: 'video',
					isDraft: false,
					searchContent: "",
					startDate:"",
					endDate:"",
				},
				listOver: false,
				listData: [],
				ceshi: {},
				tag: 1,
				tabBars: [],
				familylist: []

			};
		},
		onPullDownRefresh() {
			this.query.lastDocId = '';
			this.getData();
		},
		onReachBottom() {
			if (!this.listOver) {
				this.getData(1);
			}
		},
		onLoad() {
			this.getData();
			this.getAllCategories();
			this.myFamilies();
		},
		onShow() {
			uni.$on('returnData', (data) => {
				this.query = JSON.parse(data)
				this.query.type = 'video'
				console.log(this.query)
			})
		},
		methods: {
			clearType(){
			  if(this.query.type == 'video'){
				  this.query.type = ''
			  }	else{
				  this.query.type = 'video'
			  }
			  
			  this.getData()
			},
			changeFanwei() {
				if (this.datefanwei) {
					this.query.startDate = this.datefanwei[0]
					this.query.endDate = this.datefanwei[1]
				} else {
					this.query.endDate = ''
					this.query.startDate = ''
				}
				this.query.lastDocId = '';
				this.getData()
				console.log(this.datefanwei)
			},
			changfenlei(e) {
				console.log(e)

				if (e) {
					this.query.categoryIds = [e]
				} else {
					this.query.categoryIds = []
				}

				this.query.lastDocId = '';
				this.getData()
			},
			
			changejiating(e) {
				console.log(e)

				if (e) {
					this.query.familyId =e
				} else {
					this.query.familyId =''
				}

				this.query.lastDocId = '';
				this.getData()
			},

			myFamilies() {

				this.$api.myFamilies().then(res => {
					console.log(res)
					console.log('家庭列表')
					
					res.unshift({
							familyName: '全部',
							docId: ''
						})
					this.familylist = res

				});
			},
			// 获取导航栏信息
			getAllCategories() {
				let tabBars = []
				this.$api.getAllCategories().then(res => {
					console.log(res)
					console.log('导航分类')
					if (res) {
						for (let i in res) {
							tabBars.push({
								name: res[i],
								id: i
							});
						}

						tabBars.unshift({
							name: '全部',
							id: ''
						})
						this.tabBars = tabBars;

						console.log(this.tabBars)
					}
				});
			},
			search(e) {
				this.query.lastDocId = '';
				this.query.searchContent = e.searchContent
				this.tag = e.tag
				this.getData()
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/create/video'
				});
			},
			closeDia() {
				this.releaseDia = false
			},
			toInfo(item) {
				let arr = this.listData.concat()

				for (var i = 0; i < arr.length; i++) {
					if (arr[i].docId == item.docId) {
						this.ceshi = arr[i] //声明一个对象保存符合要求的数据
						arr.splice(i, 1) //先把符合条件的数据从当前数组中删除
						break;
					}
				}
				arr.unshift(this.ceshi) //通过unshift函数把符合要求的数据放到第一位
				let data = JSON.stringify(arr)
				console.log('to videoInfo data ',data)
				uni.navigateTo({
					url: '/pages/tabbar/video/videoInfo?data=' + encodeURIComponent(JSON.stringify(arr))
				})
			},
			resetData() {
				this.query = {
					categoryIds: [],
					pageSize: 10,
					lastDocId: '',
					type: 'video',
					isDraft: false
				}
				this.getData();
			},
			toSearch() {
				uni.navigateTo({
					url: `/pages/news/search?video=1`
				});
			},
			getData(type) {

				this.loadingOver = false;



				if (this.tag == 1) {
					this.$api.queryArticles(this.query).then(res => {
						console.log(res);
						if (type == 1) {
							this.listData = [...this.listData, ...res.list];
						} else {
							this.listData = res.list;
						}
						if (res.lastDocId) {
							this.query.lastDocId = res.lastDocId;
						}

						if (res.list.length < this.query.pageSize) {
							this.listOver = true;
						}

						this.loadingOver = true;
						uni.stopPullDownRefresh();
					});
				} else {
					this.$api.queryLives(this.query).then(res => {
						console.log(res);
						if (type == 1) {
							this.listData = [...this.listData, ...res.list];
						} else {
							this.listData = res.list;
						}
						if (res.lastDocId) {
							this.query.lastDocId = res.lastDocId;
						}

						if (res.list.length < this.query.pageSize) {
							this.listOver = true;
						}

						this.loadingOver = true;
						uni.stopPullDownRefresh();
					});
				}

			}
		}
	};
</script>

<style>
	page {
		background-color: #ffffff !important;
	}
</style>

<style lang="scss">
	
	.checkVideo{
		.active{
			color: #f97f7f;
		}
		.iconfont{
			margin-right: 4px;
		}
	}
	.fixedTop {
		width: 100%;
		background-color: #de4849;
		box-sizing: border-box;
		z-index: 100;
		padding: 10rpx 30rpx 30rpx 30rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;

		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;

			span {
				margin: 0 10rpx;
				font-size: 30rpx;
				margin-left: 30rpx;
				color: #fff;
			}
		}
	}

	.shaixuan {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px auto;

		.li {
			margin-left: 30px;
		}
	}

	.shaixuanqi {
		display: flex;
		padding: 6px 15px;
		border-radius: 50px;
		background-color: #f6f4f4;
		font-size: 28rpx;
		margin-right: 10px;

		.iconfont {
			margin-right: 4px;
		}
	}
</style>